<template>
  <view class="u-skeleton">
    <view class="skeleton-tabs">
      <view class="u-skeleton-rect"></view>
      <view class="u-skeleton-rect"></view>
    </view>
    <view class="banner">
      <view class="u-skeleton-rect banner-title"></view>
      <view class="banner-describe">
        <view class="u-skeleton-rect"></view>
        <view class="u-skeleton-rect"></view>
      </view>
      <view class="banner-content form" v-for="item in 3" :key="item">
        <view class="u-skeleton-rect form-label"></view>
        <view class="u-skeleton-rect form-value"></view>
      </view>
      <view class="banner-footer">
        <view class="u-skeleton-rect"></view>
      </view>
    </view>
    <view class="footer">
      <view class="u-skeleton-rect content-title"></view>
      <view class="footer-content form" v-for="item in 10" :key="item + 666">
        <view class="u-skeleton-rect form-label"></view>
        <view class="u-skeleton-rect form-value"></view>
      </view>
    </view>
  </view>
  <!--引用组件-->
  <u-skeleton :loading="true" :animation="true" bgColor="#FFF"></u-skeleton>
</template>
<style lang="scss">
.skeleton-tabs {
  display: flex;
  padding-left: 20rpx;
  padding-top: 20rpx;
  .u-skeleton-rect {
    margin-right: 20rpx;
    width: 100%;
    height: 50rpx;
  }
}
.banner {
  width: 90%;
  height: 400rpx;
  border-radius: 20rpx;
  padding: 20rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  background: linear-gradient(to top, #d6e9ff, #fff);
  .banner-title {
    height: 42rpx;
    width: 30%;
  }
  .banner-describe {
    margin: 20rpx 0;
    height: 40rpx;
    width: 40%;
    display: flex;
    .u-skeleton-rect {
      margin-right: 20rpx;
      width: 100%;
    }
  }
  .banner-content {
    margin-bottom: 20rpx;
    height: 40rpx;
  }
  .banner-footer {
    height: 40rpx;
    display: flex;
    flex-direction: row-reverse;
    .u-skeleton-rect  {
      width: 200rpx;
    }
  }
}
.form {
  display: flex;
  justify-content: space-between;
  .form-label {
    width: 200rpx;
  }
  .form-value {
    width: 200rpx;
  }
}
.footer {
  margin: 20rpx 20rpx 100rpx;
  background-color: #fff;
  .content-title {
    height: 60rpx;
    margin: 20rpx 0 40rpx 20rpx;
    width: 30%;
  }
  .footer-content {
    margin-bottom: 20rpx;
    height: 40rpx;
    padding: 0 20rpx;
  }
}
</style>